<template>
  <div class="app-container">
    <div class="syl-group">
      <el-row :gutter="20">
        <el-col :span="12">
          <div id="order" class="ordered" />
        </el-col>
        <el-col :span="12" />
      </el-row>
      <div class="box">
        <div class="box-left">热门套餐</div>
        <div class="box-right">
          <el-button
            :class="[type === 1 ? 'active' : '']"
            size="mini"
            type="text"
            @click="getDate(1)"
          >本周
          </el-button>
          <el-button
            :class="[type === 2 ? 'active' : '']"
            size="mini"
            type="text"
            @click="getDate(2)"
          >本月
          </el-button>
        </div>
      </div>
      <div v-if="mallList.length > 0">
        <el-row :gutter="20">
          <el-col v-for="item in mallList" :key="item.value" :xs="12" :sm="12" :lg="{ span: '4-8' }">
            <div class="set-mall" />
            <p style="text-align: center" v-html="'销量:' + item.sales + '份'" />
          </el-col>
        </el-row>
      </div>
      <div
        v-else
        style="width: 100%; height: 140px; line-height: 160px; font-size: 18px"
      >
        暂无数据
      </div>
      <div class="box">
        <div class="box-left">订单趋势图</div>
        <div class="box-right">
          <el-button
            :class="[typeName === 1 ? 'active' : '']"
            size="mini"
            type="text"
            @click="getDateName(1)"
          >本周
          </el-button>
          <el-button
            :class="[typeName === 2 ? 'active' : '']"
            size="mini"
            type="text"
            @click="getDateName(2)"
          >本月
          </el-button>
          <el-date-picker
            v-model="dateRangeValue"
            type="daterange"
            size="mini"
            :clearable="false"
            range-separator="~"
            value-format="timestamp"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getRangeTime"
          />
        </div>
      </div>
      <div id="nprdjmakl" class="ordering" />
    </div>
  </div>
</template>
<script>
import { orderPieChart, showHotPackage, getOrderLine } from '@/api/datacenter'
export default {
  name: 'Index',
  data() {
    return {
      // 日期切换
      type: 1,
      typeName: 1,
      // 日期
      dateRange: [],
      dateRangeValue: [],
      // 查询参数
      queryNames: {
        startDate: null,
        endDate: null
      },
      // 套餐数据
      mallList: []
    }
  },
  mounted() {
    this.getDate(1)
    this.getDateName(1)
    this.getPieChart()
    this.getPackage()
  },
  methods: {
    /** 获取价格数据 **/
    getPieChart() {
      orderPieChart().then((res) => {
        const { data } = res
        this.getOrderNum(data)
      })
    },
    /** 订单价格  **/
    getOrderNum(data) {
      // 基于准备好的dom，初始化echarts实例
      const rateChart = this.$echarts.init(document.getElementById('order'))
      // 绘制图表
      rateChart.setOption({
        title: {
          text: '订单价格分布图',
          left: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 0,
          left: 'center'
        },
        // 设置饼状图每个颜色块的颜色
        // color : [ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ],
        // 重点
        label: {
          normal: {
            formatter: '{b}:{c}: ({d}%)',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 15
            }
          }
        },
        series: [
          {
            name: '订单金额',
            type: 'pie',
            radius: '50%',
            data: data,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} : {c} ({d}%)'
                },
                labelLine: { show: true }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
      setTimeout(() => {
        window.addEventListener('resize', function() {
          rateChart.resize()
        })
      }, 200)
    },
    /** 本周，本月 **/
    getDate(row) {
      const end = new Date()
      const start = new Date()
      if (row === 1) {
        this.type = 1
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        this.dateRange = [start, end]
      } else {
        this.type = 2
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        this.dateRange = [start, end]
      }
      this.getPackage()
    },
    /** 套餐数据 **/
    getPackage() {
      showHotPackage(this.addDateOrders(this.queryNames, this.dateRange)).then((res) => {
        const { data } = res
        this.mallList = data
        this.$nextTick(() => {
          this.getVis(data)
        })
      }
      )
    },
    /** 套餐可视化 **/
    getVis(data) {
      if (data.length > 0) {
        const mall = document.getElementsByClassName('set-mall')
        for (let i = 0; i < mall.length; i++) {
          // 基于准备好的dom，初始化echarts实例
          const rateChart = this.$echarts.init(mall[i])
          // 绘制图表
          rateChart.setOption({
            tooltip: {
              trigger: 'item',
              formatter: '{b} : {c} ({d}%)'
            },
            // 设置饼状图每个颜色块的颜色
            // color : [ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ],
            series: [
              {
                type: 'pie',
                radius: ['50%', '30%'],
                data: [
                  {
                    value: data[i].sales,
                    name: data[i].name
                  }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
          setTimeout(() => {
            window.addEventListener('resize', function() {
              rateChart.resize()
            })
          }, 200)
        }
      }
    },
    /** 订单趋势图 **/
    getDateName(rows) {
      const end = new Date()
      const start = new Date()
      if (rows !== 1) {
        this.typeName = 2
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        this.dateRangeValue = [start, end]
      } else {
        this.typeName = 1
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        this.dateRangeValue = [start, end]
      }
      this.getLinr(this.dateRangeValue)
    },
    /** 订单数据 **/
    getLinr(row) {
      const queryName = {
        startDate: this.parseTime(row[0], '{y}-{m}-{d}'),
        endDate: this.parseTime(row[1], '{y}-{m}-{d}')
      }
      getOrderLine(queryName).then(res => {
        const { data } = res
        const x = data.map((item) => item.dayDate)
        const y = data.map((item) => item.totalOrderNum)
        this.getOrdering(x, y)
      })
    },
    /** 趋势图数据  **/
    getOrdering(x, y) {
      // 基于准备好的dom，初始化echarts实例
      const rateChart = this.$echarts.init(document.getElementById('nprdjmakl'))
      // 绘制图表
      rateChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          width: '89%', // 宽度
          height: '70%', // 高度
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: x
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '订单数量',
            data: y,
            type: 'line',
            areaStyle: {
              color: 'transparent'// 改变区域颜色
            }
          }
        ]
      })
      setTimeout(() => {
        window.addEventListener('resize', function() {
          rateChart.resize()
        })
      }, 200)
    },
    /** 日期切换 **/
    getRangeTime(row) {
      this.getLinr(row)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  margin-top: 10px;
  display: flex;
  border-bottom: 1px solid #f8f8f8;

  .box-left {
    width: 50%;
    height: 60px;
    text-align: left;
  }

  .box-right {
    text-align: right;
    width: 50%;
    height: 60px;
  }
}

.active {
  font-size: 16px;
}

.set-mall {
  width: 100%;
  height: 160px;
}

.ordered {
  width: 80%;
  height: 360px;
  margin: auto;
}

.el-col-lg-4-8 {
  width: 20%;
}

.ordering {
  width: 100%;
  margin: 20px 0;
  height: 360px;
}
</style>
